<template>
  <div>
    <div class="articlecontent">
      请输入文章内容
    </div>
    <div class="content animated fadeInDown">
      <el-input class="inputcontent" v-model="articleContent" maxlength="500" size="large" type="textarea"
        show-word-limit :rows="20" />

      <div class="title">
        请输入标题
      </div>
      <el-input class="inputTitle" v-model="articleTitle" maxlength="500" size="large"
        type="textarea" show-word-limit :rows="2" />

    </div>

    <div class="buttonList">
      <el-button class="animated fadeInUp" @click="confirmupdateArticle"
        style="opacity: 0.5;margin-top: 10px;position: absolute;border-radius: 20px;background-color: blanchedalmond;"
        size="large">确定更新文章</el-button>
      <el-button class="animated fadeInUp" @click="backArticleList"
        style="opacity: 0.5;right: 0;position: absolute;border-radius: 20px;background-color: blanchedalmond;"
        size="large">返回文章列表</el-button>


    </div>

  </div>
</template>
<script setup lang='ts'>
  import { ref, defineEmits } from 'vue'
  import { reqUpdateArticle } from '@/api/article'
  import { useRouter } from 'vue-router'
  import { ElMessage } from 'element-plus'
  import  useArticleStore  from '@/store/modules/article'
  import useUserStore from '@/store/modules/user'


  let articleStore = useArticleStore()
  let userStore = useUserStore()
  let $router = useRouter()
  // const props = defineProps({
  //   articleContent: {
  //     type: String
  //   },
  //   articleTitle: {
  //     type: String
  //   },
  //   articleId: {
  //     type: String
  //   },
  // })

  const articleContent = ref(articleStore.articleForm.articleContent)
  const articleTitle = ref(articleStore.articleForm.articleTitle)
  const articleId = ref(articleStore.articleForm.articleId)
  

  const $emit = defineEmits(['updateisShowBook'])




  const backArticleList = () => {

    $emit('updateisShowBook', true)
    location.reload();
  }

  const confirmupdateArticle = async () => {

    let updateArticleForm = {
      id: articleId.value,
      userId: userStore.currentUser.id,
      articleContent: articleContent.value,
      articleTitle: articleTitle.value,
    }
    console.log(updateArticleForm);

    let result = await reqUpdateArticle(updateArticleForm)
    if (result.code == 200) {
      $router.push('/')
      ElMessage({
        type: 'success',
        message: '更新成功'
      })
    } else {
      ElMessage({
        type: 'error',
        message: '更新失败'
      })
    }
  }

</script>
<style scoped>
  .buttonList {
    display: flex;


    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-top: 3rem;
  }

  .content {



    border-radius: 100px;
    /* 设置圆角半径为 10px */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* 设置阴影效果 */
  }

  .articlecontent {
    padding-top: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .inputcontent {
    opacity: 0.5;
    /* 设置不透明度为 50% */
    font-size: large;

    font-weight: bolder;
  }

  .inputTitle {


    margin-top: 10px;
    opacity: 0.5;
    /* 设置不透明度为 50% */
    font-size: large;

    font-weight: bolder;
  }

  .title {



    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
    font-size: 20px;
    font-weight: bold;
  }
</style>